<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <%@ include file="include/header.jsp" %>
    <script src="${pageContext.request.contextPath}/js/admin/admin_home.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/admin_home.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/admin_main.css"/>
    <title>WolfCode Mall管理后台 - 分类添加</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="${pageContext.request.contextPath}/js/element-ui/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="${pageContext.request.contextPath}/js/element-ui/index.js"></script>
    <style rel="stylesheet">
        .details_property_list > li {
            list-style: none;
            padding: 5px 0;
        }

        div.br {
            height: 20px;
        }
        .el-tag {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .button-new-tag {
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }

    </style>
</head>
<body>
<%@include file="include/menuPage.jsp"%>
<!--菜单回显-->
<c:set var="currentMenu" value="category"/>
<form action="/admin/category/saveOrUpdate" method="post">
<div class="details_div_first">
    <input type="hidden" value="${category.categoryId}" id="category_id" name="categoryId"/>
    <div class="frm_div">
        <label class="frm_label text_info" id="lbl_category_id">分类编号</label>
        <span class="details_value" id="span_category_id">系统指定</span>
    </div>
    <div class="frm_div">
        <label class="frm_label text_info" id="lbl_category_name" for="input_category_name">分类名称</label>
        <input class="frm_input" id="input_category_name" name="categoryName" type="text" maxlength="50"
               value="${category.categoryName}"/>
    </div>
</div>
<div class="details_div details_div_last">
    <span class="details_title text_info">属性列表</span>
    <div id="app" style="width: 50%">
        <el-tag
                :key="tag"
                v-for="(tag,index) in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
            {{tag}}
        </el-tag>
        <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="medium"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 属性</el-button>

        <input type="hidden" v-model="dynamicTags" name="propertys">

    </div>


</div>
<div class="details_tools_div">
    <input class="frm_btn" id="btn_category_save" type="submit" value="保存"/>
    <input class="frm_btn frm_clear" id="btn_category_cancel" type="reset" value="取消" onclick="window.location='/admin/category'"/>
</div>
</form>

<div class="loader"></div>
<script>
    const vue = new Vue({
        el: '#app',
        data() {
            return {
                dynamicTags: ${propertys == "no" } ? [] : ${propertys},
                inputVisible: false,
                inputValue: ''
            };
        },
        methods: {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                var inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        }
    })

    $(function () {
        $("#ul_home_menu li[data-toggle='${currentMenu}']").addClass("menu_li_select")

        if($("#category_id").val() === ''){
            $("#div_home_title span").text("添加分类")
            document.title = "WolfCode Mall管理后台 - 添加分类"
        }else{
            $("#div_home_title span").text("修改分类")
            document.title = "WolfCode Mall管理后台 - 修改分类"
        }

    })
</script>
</body>
</html>
